<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>根据图片加载速度来出现百分比</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.loading{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;
	}
	.loading .pic{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 30px;
		line-height: 100px;
		text-align: center; 
	}
	.loading .pic span{
		display: block;
		width: 80px;
		height: 80px;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 50%;
		box-shadow: 0 3px 0 #F62345;
		animation: rotate 1s infinite linear;
	}
	@keyframes rotate{
		0% {transform: rotate(0deg);}
		100% {transform: rotate(360deg);}
	}
</style>
<script src="../jquery-2.1.1.min.js"></script>
<script>
	$(function(){
		var img = $("img");
		var num = 0;
		var imgs = img.length;
		img.each(function(i){
			var oImg = new Image();

			oImg.onload = function(){
				oImg.onload = null;
				num++;
				$(".loading b").html(parseInt(num/$("img").size()*100)+"%");
				if (num==imgs) {
					$(".loading").fadeOut();
				}
			}
			oImg.src = img[i].src;
		})
	})
</script>
<body>
    <div class="loading">
    	<div class="pic">
    		<span></span>
    		<b>0%</b>
    	</div>
	</div>
    <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/cdbf6c81800a19d85c547b1431fa828ba61e4648.jpg" alt="heizi2">
    <img src="http://pic1.win4000.com/wallpaper/4/56208ea9649d4.jpg" alt="heizi">
	<img src="http://2t.5068.com/uploads/allimg/151030/48-151030105G1.jpg" alt="xialuote">
    <img src="http://img.bimg.126.net/photo/5Dx3IEUVive4MRE-rQhSzw==/5759259498477486636.jpg" alt="zhende">
    <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb64601a166b224f4a20a4dd58.jpg" alt="guiltyCrown">
</body>
</html>